<template>
	<view class="m-luck-draw">
		<view class="m-lunck-draw-bg" :style="{'background-image':`url(${actAd.bgImg})`}" v-if="bgType=='image'"></view>
		<!-- #ifdef MP-TOUTIAO -->
		<view class="luck-draw-name-box flex-row-start-center"
			:style="{height:propertyHeight+'rpx',top:propertyTop+'rpx','padding-left':toutiaoHeadLeft+'rpx','line-height':propertyHeight+'rpx'}">
			心动抽卡
		</view>
		<!-- #endif -->
		<view class="property-box flex-row-center-center" :style="{height:propertyHeight+'rpx',top:propertyTop+'rpx'}">
			<view class="property-item flex-row-start-center">
				<view class="property-icon flex-row-center-center">
					<image class="cover-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
						mode="aspectFill"></image>
				</view>
				<view class="property-inner flex-row-start-center">120</view>
				<view class="property-add-icon flex-row-center-center">
					<image class="cover-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
						mode="aspectFill"></image>
				</view>
			</view>

		</view>
		<view class="tip-box flex-row-center-center">
			<text class="tip-default-text">再心动</text>
			<text class="tip-special-text">20</text>
			<text class="tip-default-text">次必得</text>
			<image class="tip-icon"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1ee25285760a4ca1b3162331362f01ba.png"
				mode="aspectFill"></image>
		</view>
		<view class="ad-content" :class="{'hideContent':!showControl}">
			<!-- :class="{acitveItem:acIndex== index}" -->
			<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
				<view class="ad-item-list" v-if="adList.length">
					<view class="ad-item" :class="{'active-ad-item':index==actAdIndex}" v-for="(item, index) in adList"
						:key="index" @click="handleAdItemClick(index,item)">
						<view class="ad-item-content">
							<image class="ad-item-image" :class="{isSelected:index==actAdIndex}" :src="item.image"
								mode="aspectFill"></image>
							<view class="bottom-name">{{item.name}}</view>
						</view>

						<view class="ad-masker" v-if="index!=actAdIndex">

						</view>

					</view>
				</view>

			</scroll-view>

		</view>
		<view class="draw-button-box flex-row-center-center" :class="{'hideContent':!showControl}">
			<view class="button-box one flex-row-center-center" :class="{isSelected:buttonIndex==0}"
				@click="handleHeartBtnClick(0)">
				<view class="price-box flex-row-start-center">
					<image class="left-icon" :src="once.icon" mode="aspectFill"></image>
					<view class="right-num">{{once.price}}</view>
				</view>
				<text>心动一次</text>
			</view>
			<view class="button-box ten flex-row-center-center" :class="{isSelected:buttonIndex==1}"
				@click="handleHeartBtnClick(1)">
				<view class="price-box flex-row-start-center">
					<image class="left-icon" :src="tenTimes.icon" mode="aspectFill"></image>
					<view class="right-num">{{tenTimes.price}}</view>
				</view>
				<text>心动十次</text>
			</view>
		</view>





		<!-- @click="handleContinueClick" -->
		<view class="card-success flex-row-start-center" v-if="showCardList">
			<view class="content-left column-content" v-if="!isOnlyOne">
				<view class="card-item card-rotate card-after-before card-farther"
					:class="{'blue-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'purple-card':item.RarityLevel==3,'colorful-card':item.RarityLevel==4}"
					:style="{'animationDelay':(index+1)*0.5+'s'}" v-for="(item,index) in columnOne" :key="index"
					@click.stop>
					<view class="card-content">
						<image class="card-image" :src="item.image" mode="widthFix"></image>
						<view class="bottom-info">
							<view class="name">{{item.roleName}}·{{item.name}}</view>
						</view>
						<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
							<image class="rl-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="content-center column-content" v-if="!isOnlyOne">
				<view class="card-item card-rotate card-after-before card-farther"
					:style="{'animationDelay':index*0.5+2+'s'}" v-for="(item,index) in columnTwo" :key="index"
					:class="{'blue-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'purple-card':item.RarityLevel==3,'colorful-card':item.RarityLevel==4}"
					@click.stop>
					<view class="card-content">
						<image class="card-image" :src="item.image" mode="widthFix"></image>
						<view class="bottom-info">
							<view class="name">{{item.roleName}}·{{item.name}}</view>
						</view>
						<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
							<image class="rl-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="content-right column-content" v-if="!isOnlyOne">
				<view class="card-item card-rotate card-after-before card-farther"
					:style="{'animationDelay':index*0.5+4+'s'}" v-for="(item,index) in columnThree" :key="index"
					:class="{'blue-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'purple-card':item.RarityLevel==3,'colorful-card':item.RarityLevel==4}"
					@click.stop>
					<view class="card-content">
						<image class="card-image" :src="item.image" mode="widthFix"></image>
						<view class="bottom-info">
							<view class="name">{{item.roleName}}·{{item.name}}</view>
						</view>
						<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
							<image class="rl-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)" mode="aspectFill">
							</image>
						</view>
					</view>

				</view>
			</view>

			<view class="content-only-one flex-row-center-center" v-if="isOnlyOne">
				<view class="one-card-item flex-row-center-center card-rotate card-after-before card-farther"
					:class="{'blue-card':oneCard.RarityLevel==1,'orange-card':oneCard.RarityLevel==2,'purple-card':oneCard.RarityLevel==3,'colorful-card':oneCard.RarityLevel==4}">
					<view class="card-content ">
						<image class="cover-img" :src="oneCard.image" mode="aspectFill"></image>
						<view class="bottom-info">
							<view class="name">{{oneCard.roleName}}·{{oneCard.name}}</view>
						</view>
						<view class="rarity-level flex-row-start-center" v-if="oneCard.RarityLevel">
							<image class="rl-img" :src="handleReturnRarityLevelUrl(oneCard.RarityLevel)"
								mode="aspectFill">
							</image>
						</view>
					</view>


				</view>
			</view>
			<!-- 		<view class="bottom-tip" @click="handleContinueClick" v-if="!isLuckDrawNow">
				<view class="left-point"></view>
				<view class="center-content">点击任意空白区域关闭</view>
				<view class="right-point"></view>
			</view> -->
			<view class="bottom-btn flex-row-center-center" v-if="!isLuckDrawNow" @click="handleContinueClick">收 下
			</view>

		</view>


	</view>
</template>

<script>
	import {
		mapGetters,
	} from "vuex";
	import {
		handleReturnRarityLevelUrl
	} from "@/utils/tools.js"
	export default {
		props: {
			storyId: {
				type: String,
				default: ""
			},
			bgType: {
				type: String,
				default: "video", //背景类型 video image  
			},
			// propertyHeight: {
			// 	type: Number,
			// 	default: 64
			// },
			// propertyTop: {
			// 	type: Number,
			// 	default: 100
			// }
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (newVal === this.storyId && this.bgType == 'video') {
						let storyData = this.globalGameCtx.nextStorySet[newVal]
						let sectionsConfig = storyData.sectionsConfig
						this.dataList = sectionsConfig.map((item, index) => {
							return {
								name: item.sectionName,
								image: item.coverImgUrl,
								seekTime: item.sectionStartTime,
								roleName: item.roleName,
								isDefault: !item.isDefault ? false : true,
								locked: !item.locked ? false : true,
								storyId: !item.storyId ? "" : item.storyId
							}
						})
						this.adList = this.dataList
					}
				},
				deep: true,
				immediate: true
			},
			showCardList: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit("hideBackBtn")
					} else {
						this.$emit("showBackBtn")
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			...mapGetters(["globalGameCtx", "curStoryId"]),
			columnOne() {
				if (this.cardList.length == 10) {
					return this.cardList.slice(0, 3)
				} else {
					return []
				}
			},
			columnTwo() {
				if (this.cardList.length == 10) {
					return this.cardList.slice(3, 7)
				} else {
					if (this.cardList.length) {
						return [this.cardList[0]]
					} else {
						return []
					}
				}
			},
			columnThree() {
				if (this.cardList.length == 10) {
					return this.cardList.slice(7)
				} else {
					return []
				}
			}
		},
		mounted() {
			this.initAudio()
		},
		data() {
			return {
				// 头条相关
				toutiaoHeadLeft: 0,


				screenWidth: 375,
				propertyHeight: 64,
				propertyTop: 100,
				showControl: true,
				showCardList: false,
				isOnlyOne: false,
				isLuckDrawNow: false,
				cardAudioContent: null,
				cardInterValId: null,
				playCardVoiceCount: 0,
				oneCard: {
					name: "白领制服",
					roleName: "秘书",
					start: 3,
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
					RarityLevel: 3
				},
				cardList: [{
						name: "白领制服",
						roleName: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						RarityLevel: 4
					},
					{
						name: "魅力米娜",
						roleName: "米娜",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						RarityLevel: 2,


					},
					{
						name: "幸运女神",
						roleName: "妙陈",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2bbb616d72a9447aac0a9422078eca6d.jpg",
						RarityLevel: 3,

					},
					{
						name: "白领制服",
						roleName: "秘书",
						start: 4,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						RarityLevel: 1,

					},
					{
						name: "魅力米娜",
						roleName: "米娜",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						RarityLevel: 4,

					},
					{
						name: "幸运女神",
						roleName: "妙陈",
						start: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f6a9b4f1e3494982946b61698a4258f3.jpg",
						RarityLevel: 3,

					},
					{
						name: "白领制服",
						roleName: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						RarityLevel: 3,

					},
					{
						name: "魅力米娜",
						roleName: "米娜",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						RarityLevel: 3,

					},
					{
						name: "幸运女神",
						roleName: "妙陈",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2955b41ebf45e9ac2112f219cd7373.jpg",
						RarityLevel: 3,

					},
					{
						name: "白领制服",
						roleName: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						RarityLevel: 2,

					},
				],
				cardListSource: [{
						name: "白领制服",
						roleName: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						RarityLevel: 4
					},
					{
						name: "魅力米娜",
						roleName: "米娜",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						RarityLevel: 2,


					},
					{
						name: "幸运女神",
						roleName: "妙陈",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2bbb616d72a9447aac0a9422078eca6d.jpg",
						RarityLevel: 3,

					},
					{
						name: "白领制服",
						roleName: "秘书",
						start: 4,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						RarityLevel: 1,

					},
					{
						name: "魅力米娜",
						roleName: "米娜",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						RarityLevel: 4,

					},
					{
						name: "幸运女神",
						roleName: "妙陈",
						start: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f6a9b4f1e3494982946b61698a4258f3.jpg",
						RarityLevel: 3,

					},
					{
						name: "白领制服",
						roleName: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						RarityLevel: 3,

					},
					{
						name: "魅力米娜",
						roleName: "米娜",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						RarityLevel: 3,

					},
					{
						name: "幸运女神",
						roleName: "妙陈",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2955b41ebf45e9ac2112f219cd7373.jpg",
						RarityLevel: 3,

					},
					{
						name: "白领制服",
						roleName: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						RarityLevel: 2,

					},
				],
				buttonIndex: -1,
				actAdIndex: 0,
				actAd: {
					name: "银河摇曳",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4289fbedcfa4fb7ac5bf5f63f9f5d1e.png",
					bgImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ad05dc82ec564a70b99e5eaa5fc53c51.jpeg",
					seekTime: 0,
				},
				once: {
					price: 1,
					icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png",
				},
				tenTimes: {
					price: 10,
					icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
				},
				dataList: [],
				adList: [{
						name: "银河摇曳",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4289fbedcfa4fb7ac5bf5f63f9f5d1e.png",
						bgImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ad05dc82ec564a70b99e5eaa5fc53c51.jpeg",
						seekTime: 0,
					}

				]
			}
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo
				this.propertyHeight = this.pxToRpx(height)
				this.propertyTop = this.pxToRpx(top)

				// 抖音获取左上角logo信息
				// #ifdef MP-TOUTIAO
				let {
					leftIcon: {
						width: toutiaoLogoWidth,
						left: toutiaoLogoLeft,
					}
				} = tt.getCustomButtonBoundingClientRect()

				this.toutiaoHeadLeft = this.pxToRpx(toutiaoLogoLeft + toutiaoLogoWidth + 5)

				console.log("抖音的获取", this.toutiaoHeadLeft);
				// #endif



			} catch (err) {

			}
		},
		methods: {
			handleReturnRarityLevelUrl,
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			initAudio() {
				return new Promise((resolve, reject) => {
					this.cardAudioContent = uni.createInnerAudioContext()
					this.cardAudioContent.src =
						"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/audio/d8d35c38d8be43eebe65b50907239510.MP3"
				})
			},
			playCardVoice() {
				if (this.cardAudioContent) {
					this.cardAudioContent.stop()
					this.cardAudioContent.play()
				} else {
					this.initAudio().then(res => {
						this.cardAudioContent.play()
					})
				}
			},

			handleContinueClick() {
				if (this.isLuckDrawNow) {
					return
				}
				this.showControl = true
				setTimeout(() => {
					this.showCardList = false
					this.isOnlyOne = false
					if (this.cardInterValId) {
						clearInterval(this.cardInterValId)
						this.playCardVoiceCount = 0
						this.cardAudioContent.stop
					}
					if (this.bgType == 'video') {
						this.$emit("getGameResult", 0)
					}
				}, 100)

			},
			handleHeartBtnClick(index) {
				this.showControl = false
				this.buttonIndex = index
				// this.$emit("getGameResult", 42)
				setTimeout(() => {
					this.buttonIndex = -1
				}, 200)
				if (index == 0) {
					// this.cardList = [this.cardListSource[0]]
					const randomIndex = Math.floor(Math.random() * this.cardListSource.length);
					// 获取随机元素
					this.
					oneCard = {
						...this.cardListSource[randomIndex],
					};
					this.playCardVoice()
					this.isOnlyOne = true

					this.isLuckDrawNow = true
					setTimeout(() => {
						this.isLuckDrawNow = false
					}, 500)

				} else {
					this.cardList = [...this.cardListSource]
					this.cardInterValId = setInterval(() => {
						if (this.playCardVoiceCount == 10) {
							clearInterval(this.cardInterValId)
							this.playCardVoiceCount = 0
							return
						}
						this.playCardVoice()
						this.playCardVoiceCount++


					}, 500)

					this.isLuckDrawNow = true
					setTimeout(() => {
						this.isLuckDrawNow = false
					}, 5500)
				}

				this.showCardList = true

				// setTimeout(() => {
				// 	this.showCardList = true
				// }, 7000)
			},
			handleAdItemClick(index, item) {
				this.actAdIndex = index
				this.actAd = item
				if (this.bgType == 'video') {
					this.$emit("getGameResult", item.seekTime)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-luck-draw {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 9999999;



		.m-lunck-draw-bg {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 0;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}

		.luck-draw-name-box {
			position: absolute;
			width: 100%;
			z-index: 2;
			font-size: 28rpx;
			color: #fff;
			line-height: 50rpx;
			text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
			display: inline-block;
			font-weight: 700;
		}

		.property-box {
			position: absolute;
			left: 0rpx;
			width: 100%;
			z-index: 1;

			.property-item {
				position: relative;
				width: 130rpx;
				height: 30rpx;
				background-color: rgba(0, 0, 0, .1);
				border-radius: 15rpx;
				margin-right: 20rpx;
				box-sizing: border-box;
				padding-left: 35rpx;
				padding-right: 35rpx;

				.property-icon {
					position: absolute;
					left: -10rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 35rpx;
					height: 35rpx;

				}

				.property-inner {
					flex: 1;
					height: 100%;
					font-size: 20rpx;
					line-height: 20rpx;
					color: #fff;
				}

				.property-add-icon {
					position: absolute;
					right: 5rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 25rpx;
					height: 25rpx;
					box-sizing: border-box;
					padding: 5rpx;
				}

			}
		}

		.tip-box {
			position: absolute;
			bottom: 40rpx;
			// background-color: pink;
			width: 100vw;
			// height: 80rpx;

			font-size: 20rpx;
			color: #fff;
			letter-spacing: 2rpx;
			text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);

			.tip-special-text {
				color: #f8efe0;
				font-weight: 700;
				font-size: 26rpx;
				letter-spacing: 0rpx;
				margin: 0rpx 4rpx;
			}

			.tip-icon {
				width: 60rpx;
				height: 30rpx;
				margin-left: 5rpx;
				margin-right: 20rpx;
			}


		}

		.draw-button-box {
			position: absolute;
			left: 0rpx;
			bottom: 90rpx;
			width: 100vw;
			height: 75rpx;
			// background-color: #fff;

			z-index: 1;

			.button-box {
				position: relative;
				width: 290rpx;
				// flex: 1;
				height: 100%;
				font-size: 24rpx;
				line-height: 90rpx;
				font-weight: 700;
				// box-shadow: 0rpx 0rpx 5rpx #fff;
				box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
				border-radius: 8rpx;

				.price-box {
					// position: absolute;
					// left: 18rpx;
					// top: 50%;
					// transform: translateY(-50%);
					// width: 100%;
					margin-right: 10rpx;

					.left-icon {
						// position: absolute;
						// left: -6rpx;
						// top: -6rpx;
						width: 30rpx;
						height: 30rpx;
					}

					.right-num {
						font-size: 22rpx;
						font-weight: 700;
						line-height: 22rpx;
						color: #fff;
						margin-left: 4rpx;
						text-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .3);
						// padding-left: 20rpx;
					}


				}
			}

			.isSelected {
				animation: selecteBtnAni 0.2s linear;
			}

			.one {
				margin-right: 60rpx;
				// margin-left: 25rpx;
				// background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
				// color: #646369;
				background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
				color: #646369;
			}

			.ten {
				// margin-right: 25rpx;
				// background-image: linear-gradient(to right bottom, #fffee8 10%, #f7cf7e 60%, #fffee8 90%);
				// color: #866557;
				background-image: linear-gradient(to right, #f3f1c6, #efcf80);
				color: #b27439;

			}
		}

		.ad-content {
			position: absolute;
			bottom: 210rpx;
			left: 0rpx;
			width: 100vw;
			height: 130rpx;
			z-index: 1;

			.scroll-content {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;
				overflow: hidden;

				.ad-item-list {
					height: 110rpx;
					margin-top: 10rpx;

				}

				.ad-item {
					position: relative;
					display: inline-block;
					width: 213rpx;
					height: 100%;
					margin-right: 20rpx;
					border-radius: 5rpx;



					.ad-masker {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 100%;
						border-radius: 5rpx;
						background-color: rgba(0, 0, 0, .5);
						z-index: 999;
					}


					.ad-item-content {
						position: relative;
						display: inline-block;
						width: 100%;
						height: 100%;
						background-color: #fff;
						border-radius: 5rpx;
						box-sizing: border-box;
						border: 2rpx solid #fff;
						overflow: hidden;

						.ad-item-image {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							border-radius: 5rpx;
						}

						.bottom-name {
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 30rpx;
							background-color: rgba(0, 0, 0, .3);
							font-size: 20rpx;
							font-weight: 700;
							line-height: 30rpx;
							text-align: left;
							padding-left: 10rpx;
							color: #fff;
						}

						.isSelected {
							animation: selecteAni 0.2s linear;
						}



					}

					&:first-child {
						margin-left: 5rpx;
					}

					&:last-child {
						margin-right: 5rpx;
					}
				}

				.active-ad-item {
					box-shadow: 0rpx 0rpx 6rpx #fff;
				}
			}


		}



		.get-cardd-list {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			z-index: 3;
			background-color: pink;
		}

		.card-success {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			z-index: 2;
			background-color: rgba(0, 0, 0, .8);
			backdrop-filter: blur(15rpx);

			.bottom-btn {
				position: absolute;
				left: 50%;
				bottom: 90rpx;
				transform: translateX(-50%);
				width: 290rpx;
				height: 75rpx;
				box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
				border-radius: 8rpx;

				font-size: 24rpx;
				line-height: 24rpx;

				font-weight: 700;

				background-image: linear-gradient(to right, #f3f1c6, #efcf80);
				color: #b27439;

				z-index: 10;

			}

			.content-only-one {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100vw;
				height: 100vh;
				z-index: 9;

				.one-card-item {
					// width: 450rpx;
					// height: 690rpx;
					width: 500rpx;
					height: 750rpx;
					border-radius: 15rpx;
					background-color: #fff;
					overflow: hidden;
					box-shadow: 0rpx 0rpx 4rpx #fff;
					transform-style: preserve-3d;
					opacity: 0;

					.card-content {
						border-radius: 15rpx;
					}


				}

				.card-after-before {
					&::after {
						height: 60rpx;
						border-radius: 0rpx 0rpx 15rpx 15rpx;
					}
				}

				.bottom-info {
					// bottom: 10px;

					.name {
						font-size: 30rpx;
						line-height: 30rpx;
					}
				}

				.rarity-level {
					width: 120rpx;
					height: 60rpx;
				}
			}

			.column-content {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.card-item {
					position: relative;
					// width: 160rpx;
					// height: 260rpx;
					width: 160rpx;
					height: 240rpx;
					background-color: #fff;
					margin-bottom: 50rpx;
					border-radius: 8rpx;
					overflow: hidden;
					box-shadow: 0rpx 0rpx 4rpx #fff;
					transform-style: preserve-3d;
					opacity: 0;
					// animation: showAni 0.5s linear forwards;


					.card-image {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						z-index: 1;
						width: 100%;
						height: 100%;

					}







				}

				@keyframes showAni {
					0% {
						opacity: 0;
						transform: scale(0.6);
					}

					100% {
						opacity: 1;
						transform: scale(1);
					}

				}

			}

			.content-left {
				margin-left: 25rpx;
			}

			.content-center {}

			.content-right {
				margin-right: 25rpx;
			}
		}



	}


	.bottom-info {
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 12;
		width: 100%;

		// background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 60%, rgba(0, 0, 0, .8) 100%);
		.name {
			width: 100%;
			font-size: 20rpx;
			line-height: 20rpx;
			text-align: center;
			color: #fff;
			margin-bottom: 10rpx;
			text-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, .3);
		}


	}


	.rarity-level {
		position: absolute;
		left: 5rpx;
		top: 5rpx;
		width: 60rpx;
		height: 30rpx;
		z-index: 10;

		.rl-img {
			width: 100%;
			height: 100%;
		}

	}


	.card-rotate {
		animation: cardRotate 0.5s linear forwards;
	}

	@keyframes cardRotate {
		0% {
			transform: scale(0.3) rotateY(180deg);
			opacity: 0;

		}

		100% {
			transform: scale(1) rotateY(360deg);
			opacity: 1;
		}
	}

	@keyframes selecteAni {

		0% {
			transform: scale(1);
		}


		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}

	}

	@keyframes selecteBtnAni {

		0% {
			transform: scale(1);
		}


		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}

	}

	.card-content {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		overflow: hidden;

	}



	.hideContent {
		opacity: 0;
	}
</style>